import React from "react";
// import { Link } from "react-router-dom";
import "./login.css"
import { Button,Input,message } from "antd";
import axios from "axios"
import {nanoid} from "nanoid"

//类组件
export default class Login extends React.Component {
    //状态组件
    constructor(props) {
        super(props);
        this.state = {
            userName: "",
            password: "",
            yzm: "",
            baseimg:"",
            uuid:""
        }
    }


    //生命周期
    componentDidMount(){
        //等待DOM元素渲染完毕后执行
       this.delCode();  //定时删除过期验证码
    }
    // 页面将要渲染时的钩子
    UNSAFE_componentWillMount(){
         //获取验证码
        this.getCode();
    }
    //获取验证码
    getCode=()=>{
        // 更新数据
        let uuid = nanoid();
        // console.log(uuid)
        this.setState({
            uuid,
            baseimg:`/api/captcha.jpg?uuid=${uuid}`
        })
    }
    //定时删除过期验证码
    delCode=()=>{
        axios.get("/api/overdueCaptcha").then(res=>{console.log("系统消息:已定时删除过期验证码")})
    }
    //获取用户输入的内容
    getVal = (e) => {
        // console.log(e.target.name+":"+e.target.value)
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    // 敲击回车键进行登录
    handleKeyUp =(event)=>{
        // console.log("@")
    // 结构赋值获取keyCode,target
    const {keyCode,target} = event
    // 判断keyCode是否是回车
    if(keyCode !== 13) return
    // 跳转页面
    this.login()
    // // 清空内容
    target.value = ""
    
    }
    //登录提交
    login = () => {
        //react底层 login 当作普通方法执行：this->window---严格模式--->undefined
        //表单验证：拿到用户输入值
        //走数据接口API
        //跳转页面Home
        let { userName, password, yzm, uuid } = this.state
        if (!userName || !password || !yzm) {
            message.error("输入信息有误",1)
        }else{
            axios.post("/api/payment/admin/login",{
                loginForm:{
                    "memberName": userName,
                    "memberPass": password,
                    "captcha":yzm,
                    uuid
                }
            }).then(res=>{
                // console.log(res)
                if(res.data.code===200){
                    message.success(res.data.msg,1.5,()=>{
                        console.log(this)
                        this.props.history.push("/home/statistics")
                    })
                }else{
                    message.error(res.data.msg,1)
                    this.getCode()
                }
            })
        }
    }
    // 登录模块
    render() {
       const {baseimg}=this.state
        return (
            <div id="login">
                <section>
                   {/* <h2>米其林汽车后台管理系统</h2>*/}
                    <ul>						
						<li><Input placeholder="请输入用户名" type="text" name="userName" className="userName" onChange={this.getVal} /></li>
						<li><Input placeholder="请输入密码" type="password" name="password" className="password" onChange={this.getVal} /></li>
						<li><Input onKeyUp={this.handleKeyUp} placeholder="请输入验证码" type="text" name="yzm" className="yzm" onChange={this.getVal} /><img src={baseimg} alt="" onClick={this.getCode}/></li>
                         <Button type="primary" block onClick={this.login}>
                        登录
                        </Button>
                    </ul>
                </section>
            </div>
        )
    }


}


// function login(){}
// login()
// let login=function(){}
// login()
// (function(){})()

// let login=()=>{}
// let login =name=>{
//     console.log(name)
// }
// let login =(name,age)=>{
//     console.log(name,age)
// }

// let login=_=>{

// }
// if(true)return false;
// let login=_=>a=>b=>{}

//export default Login




